import React, {useState} from 'react';
import WithExtraProp from '@/components/14- 高阶组件/WithExtraProp.jsx'
import Children from '@/components/14- 高阶组件/Children.jsx'
import ChildrenTwo from '@/components/14- 高阶组件/ChildrenTwo.jsx'

const App = () => {
    /**
     * 高阶组件（Higher-Order Component，HOC）
     * 是一个函数，接收一个组件作为参数，并返回一个新的组件。
     * 用于复用组件逻辑、条件渲染、操作props、访问refs等场景。一般以with开头
     */

    const EnhancedMyComponent = WithExtraProp(Children)
    const EnhancedMyComponentTwo = WithExtraProp(ChildrenTwo)
    return (
        <div>
            <div>父组件</div>
            <EnhancedMyComponent></EnhancedMyComponent>
            <EnhancedMyComponentTwo></EnhancedMyComponentTwo>
        </div>
    );
};

export default App;